import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {HeaderWrap, Inner, Logo, Nav, NavItem, SearchWrap, NavSearch, Addition, Button, SearchInfo, SearchInfoTitle, SearchInfoList, SearchInfoSwitch, SearchInfoItem} from './style';
import * as actionCreators from '../../actions/HeaderActions';

class Header extends Component{

    getSearchList() {
        const {focused, list, page, totalPage, mouseIn, handleMouseEnter, handleMouseLeave, handleChangeListPage} = this.props;
        let jsList = list.toJS();
        let pageList = [];
        for(let i = (page-1) * 10; i < page * 10; i++){
            let item = jsList[i];
            if(item){
                pageList.push(<SearchInfoItem key={i}>{item}</SearchInfoItem>);
            }
        }
        if(focused || mouseIn){
            return(
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchInfoTitle>
                        热门搜索
                        <SearchInfoSwitch onClick={() => handleChangeListPage(page, totalPage, this.spinIcon)}>
                            <i ref={(icon) => {this.spinIcon = icon}} className="iconfont iconspin"></i>
                            换一批
                        </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>{pageList}</SearchInfoList>
                </SearchInfo>
            );
        }
    }

    render() {
        const {focused, list, handleInputFocus, handleInputBlur} = this.props;
        return (
            <HeaderWrap>
                <Inner>
                    <Link to="/">
                        <Logo />
                    </Link>
                    <Nav>
                        <NavItem className="left active">
                            <i className="iconfont iconnavigation"></i>
                            <span>首页</span>
                        </NavItem>
                        <NavItem className="left">
                            <i className="iconfont icondownload"></i>
                            <span>下载App</span>
                        </NavItem>
                        <NavItem className="right">登录</NavItem>
                        <NavItem className="right">
                            <i className="iconfont iconAa"></i>
                        </NavItem>
                        <SearchWrap>
                            <NavSearch
                                className={focused ? 'focused' : ''}
                                onFocus={() => handleInputFocus(list)}
                                onBlur={handleInputBlur}
                            />
                            <i className={focused ? 'focused iconfont iconsearch' : 'iconfont iconsearch'}></i>
                            {this.getSearchList()}
                        </SearchWrap>
                    </Nav>
                    <Addition>
                        <Button className="write">
                            <i className="iconfont iconfeather"></i>
                            <span>写文章</span>
                        </Button>
                        <Button className="reg">注册</Button>
                    </Addition>
                </Inner>
            </HeaderWrap>
        )
    }

}

const mapStateToProps = (state) => {
    return {
        focused : state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        mouseIn: state.getIn(['header', 'mouseIn'])
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            (list.size === 0) && dispatch(actionCreators.getRecommendList());
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter());
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave());
        },
        handleChangeListPage(page, totalPage, spin) {
            let angle = spin.style.transform.replace(/[^0-9]/ig,'');
            if(angle){
                angle = parseInt(angle, 10);
            } else {
                angle = 0;
            }
            spin.style.transform = 'rotate('+ (angle + 360) +'deg)';
            if(page < totalPage){
                dispatch(actionCreators.changeListPage(page + 1));
            } else {
                dispatch(actionCreators.changeListPage(1));
            }

        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Header);